﻿@page "/web-serial"
@inject IStringLocalizer<WebSerials> Localizer

<h3>@Localizer["WebSerialTitle"]</h3>

<h4>@Localizer["WebSerialIntro"]</h4>

<p>@((MarkupString)Localizer["WebSerialDescription"].Value)</p>

<PackageTips Name="BootstrapBlazor.WebAPI" />

<DemoBlock Title="@Localizer["WebSerialNormalTitle"]" Introduction="@Localizer["WebSerialNormalIntro"]" Name="WebSerialNormal">
    <GroupBox Title="串口设置">
        <div class="row g-3">
            <div class="col-12 col-sm-6 col-md-4">
                <Select Color="Color.Primary" Items="BaudRateList" @bind-Value="@SelectedBaudRate" ShowLabel="true" />
            </div>
            <div class="col-12 col-sm-6 col-md-4">
                <BootstrapInputNumber Color="Color.Primary" @bind-Value="@options.DataBits" ShowLabel="true" />
            </div>
            <div class="col-12 col-sm-6 col-md-4">
                <BootstrapInputNumber Color="Color.Primary" @bind-Value="@options.StopBits" ShowLabel="true" />
            </div>
            <div class="col-12 col-sm-6 col-md-4">
                <Select Color="Color.Primary" @bind-Value="@options.FlowControlType" ShowLabel="true" />
            </div>
            <div class="col-12 col-sm-6 col-md-4">
                <Select Color="Color.Primary" @bind-Value="@options.ParityType" ShowLabel="true" />
            </div>
        </div>
    </GroupBox>
    <GroupBox Title="其他功能" class="mt-3">
        <div class="row g-3">
            <div class="col-12 col-sm-6 col-md-4">
                <BootstrapInputNumber Color="Color.Primary" @bind-Value="@options.BufferSize" ShowLabel="true" />
            </div>
            <div class="col-12 col-sm-6 col-md-4">
                <Select Color="Color.Primary" @bind-Value="@options.AutoFrameBreakType" ShowLabel="true" />
            </div>
            <div class="col-12 col-sm-6 col-md-4">
                <BootstrapInput Color="Color.Primary" @bind-Value="@options.FrameBreakChar" ShowLabel="true" />
            </div>
            <div class="col-12 col-sm-6 col-md-4">
                <Switch ShowLabel="true" @bind-Value="@options.AutoConnect" />
            </div>
            <div class="col-12 col-sm-6 col-md-4">
                <Switch ShowLabel="true" @bind-Value="@options.OutputInHex" />
            </div>
            <div class="col-12 col-sm-6 col-md-4">
                <Switch ShowLabel="true" @bind-Value="@options.InputWithHex" />
            </div>
            <div class="col-12 col-sm-6 col-md-4">
                <Switch ShowLabel="true" @bind-Value="@options.AutoGetSignals" />
            </div>
        </div>
    </GroupBox>

    <GroupBox Title="操作" class="mt-3">
        <div class="mt-3">
            @if (Flag)
            {
                <WebSerial @ref="WebSerial"
                           OnConnect="@OnConnect"
                           OnReceive="@OnReceive"
                           OnSignals="@OnSignals"
                           OnLog="@OnLog"
                           OnError="@OnError"
                           Options="@options" Debug
                           ShowUI="false" />

                <div @ref="WebSerial.Element">
                    <div class="row m-3">
                        <div class="col-12">
                            <BootstrapInputGroup>
                                <Button data-action="butConnect" Text="@options.ConnectBtnTitle" />
                                @if (!IsConnected)
                                {
                                    <Button Text="关闭" OnClick="OnApply" Icon="fa-fw fa-solid fa-close" />
                                }
                                else
                                {
                                    <Button Text="@options.GetSignalsBtnTitle" OnClick="WebSerial.GetSignals" />
                                }
                            </BootstrapInputGroup>
                        </div>
                    </div>
                    <div class="row m-3">
                        <div class="col-6">
                            <textarea class="form-control" type="text" data-action="fname" style="visibility:hidden;" />
                        </div>
                        <div class="col-6">
                            <Button data-action='butwrite' style="visibility:hidden;" Text="@options.WriteBtnTitle" />
                        </div>
                    </div>
                    @if (WebSerial != null && IsConnected)
                    {
                        <div class="row m-3">
                            <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
                                <Switch @bind-Value="WebSerial.DTR" ShowLabel="true" OnValueChanged="WebSerial.SetSignalDTR" />
                            </div>
                            <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
                                <Switch @bind-Value="WebSerial.RTS" ShowLabel="true" OnValueChanged="WebSerial.SetSignalRTS" />
                            </div>
                            <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
                                <Switch @bind-Value="WebSerial.Break" ShowLabel="true" OnValueChanged="WebSerial.SetSignalBreak" />
                            </div>
                        </div>
                        <div class="row m-3">
                            <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
                                RING
                                <Light Color="@(Signals.RING?Color.Success:Color.None)"></Light>
                            </div>
                            <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
                                DSR
                                <Light Color="@(Signals.DSR?Color.Success:Color.None)"></Light>
                            </div>
                            <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
                                CTS
                                <Light Color="@(Signals.CTS?Color.Success:Color.None)"></Light>
                            </div>
                            <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
                                DCD
                                <Light Color="@(Signals.DCD?Color.Success:Color.None)"></Light>
                            </div>
                        </div>
                    }
                </div>
                <pre data-action="log"></pre>
            }
            else
            {
                <div class="col-6">
                    <Button Text="应用" OnClick="OnApply" Icon="fa-fw fa-solid fa-play" />
                </div>
            }
        </div>
    </GroupBox>

    <section ignore>
        <p>注意:本例子改变设置要点关闭再重新应用</p>
        <pre style="overflow-y:scroll;max-height:500px;">@_message</pre>
        <pre style="color:green">@_statusMessage</pre>
        <pre style="color:red">@_errorMessage</pre>
        <hr />
        <a href="https://github.com/densen2014/Densen.Extensions/blob/master/Demo/Receive_DSP.ino">附件: Arduino源码示例</a>
    </section>
</DemoBlock>


<AttributeTable Items="@GetAttributes()" />

<AttributeTable Title="@Localizer["WebSerialOptionsText"]" Items="@GetWebSerialOptionsAttributes()" />

